import { FC, PropsWithChildren, MutableRefObject, useRef, useEffect } from 'react'
import { Button, message, SelectProps } from 'antd'
import {
  ModalForm,
  ProFormText,
  ProFormSelect,
  ProFormDependency,
  ProFormUploadButton,
  ProFormTextArea,
  ProFormDigit,
} from '@ant-design/pro-form'
import { ActionType } from '@ant-design/pro-table'
import type { ProFormInstance } from '@ant-design/pro-form'
import { ModelFormModeEnum } from '@/enums/ModelFormModeEnum'
import { serverSave, serverUpdate } from '@/api/efficient/server'
import { ServerDTO } from '@/model/efficient/ServerDTO'
import { getToken } from '@/utils/auth'

interface ServerFormParam {
  mode: ModelFormModeEnum,
  row?: ServerDTO,
  actionRef: MutableRefObject<ActionType>
  keyTypes: SelectProps<any>['options'] | string[]
}

const ServerForm: FC<ServerFormParam> = (props: PropsWithChildren<ServerFormParam>) => {
  const { mode, row, keyTypes } = props
  const formRef = useRef<ProFormInstance>()
  useEffect(() => {
    formRef.current?.setFieldsValue(row)
  }, [row])
  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 14 },
  }
  return (
    <div className="server-form">
      <ModalForm<ServerDTO>
        formRef={formRef}
        title={ModelFormModeEnum.add === mode ? '新增' : '编辑'}
        trigger={
          <Button type={ModelFormModeEnum.add === mode ? 'primary' : 'link'}>
            {ModelFormModeEnum.add === mode ? '新增' : '编辑'}
          </Button>
        }
        layout="horizontal"
        {...formItemLayout}
        onFinish={async (values) => {
          const newValue = {
            ...values,
            key: values.keyType === 1 ? values.key : values?.file[0]?.response?.data,
          }
          if (mode === ModelFormModeEnum.add) await serverSave(newValue)
          else if (mode === ModelFormModeEnum.update) await serverUpdate(newValue)
          message.success(`${ModelFormModeEnum.add === mode ? '新增' : '编辑'}成功`)
          formRef.current?.resetFields()
          await props.actionRef.current.reload()
          return true
        }}
      >
        <ProFormText
          name="id"
          label="id"
          placeholder="id"
          hidden
        />
        <ProFormText
          name="publicIp"
          label="公网ip"
          placeholder="请输入公网ip"
        />
        <ProFormText
          name="privateIp"
          label="内网ip"
          placeholder="服务器内网ip"
        />
        <ProFormText
          name="name"
          label="服务器名称"
          placeholder="服务器名称"
          rules={[{ required: true, message: '服务器名称' }]}
        />
        <ProFormDigit
          name="port"
          label="服务器端口"
          placeholder="服务器端口"
          rules={[{ required: true, message: '服务器端口' }]}
          fieldProps={{ precision: 0 }}
        />
        <ProFormText
          name="username"
          label="服务器用户名"
          placeholder="服务器用户名"
        />
        <ProFormText.Password
          name="password"
          label="服务器密码"
          placeholder="服务器密码"
        />
        <ProFormSelect
          name="keyType"
          label="服务器密钥类型"
          placeholder="服务器密钥类型"
          initialValue={1}
          options={keyTypes}
        />
        <ProFormDependency name={['keyType']}>
          {
            ({ keyType }) => {
              if (keyType === 1) {
                return (
                  <ProFormTextArea
                    name="key"
                    label="密钥"
                    placeholder="服务器密钥"
                  />
                )
              }
              return (
                <ProFormUploadButton
                  name="file"
                  label="密钥"
                  placeholder="服务器密钥"
                  action="/api/oss/file/upload"
                  fieldProps={{
                    headers: {
                      token: getToken(),
                    },
                  }}
                />
              )
            }
          }
        </ProFormDependency>

        <ProFormText
          name="principal"
          label="负责人"
          placeholder="请输入负责人"
          rules={[{ required: true, message: '请输入负责人' }]}
        />
        <ProFormText
          name="sourcePath"
          label="源码根目录"
          placeholder="源码根目录"
          tooltip="存放git源码的路径"
          initialValue="/source"
          rules={[{ required: true, message: '请输入源码根目录' }]}
        />
        <ProFormText
          name="deployPath"
          label="部署根目录"
          placeholder="部署根目录"
          tooltip="部署的根路径"
          initialValue="/deploy"
          rules={[{ required: true, message: '请输入部署根目录' }]}
        />
      </ModalForm>
    </div>
  )
}

export default ServerForm
